<template>
  <base-paenl>
    <span slot="header">房管员详情</span>
    <div slot="main" class="slot-main">
      <div class="grid-info-contain">
        <div class="grid-info-photo-bg">
          <el-image
            v-if="data.toux"
            style="
            width: 99px;
            height: 143px;
          "
            :src="userImgUrl + data.toux"
          >
          </el-image>
        </div>
        <div class="grid-info">
          <div class="grid-info-content">
            <div class="grid-info-item">姓名：{{ data.gridYuanName }}</div>
            <div class="grid-info-item">性别：{{ data.sex == 1 ? '男':'女'}}</div>
          </div>
          <div class="grid-info-content">
            <div class="grid-info-item">管辖网格：{{ data.gridName }}</div>
          </div>
          <div class="grid-info-content">
            <div class="grid-info-item">联系电话：{{ data.contact }}</div>
          </div>
          <div class="grid-info-content">
            <div class="grid-info-item">负责社区数：{{ data.fzsqs }}</div>
          </div>
          <div class="grid-info-content">
            <div class="grid-info-item">登录时间：{{ data.loginTime }}</div>
          </div>
          <div class="grid-info-content">
            <div class="grid-info-item">房管员ID：{{ data.appUserId }}</div>
          </div>
        </div>
      </div>
      <div class="grid-info-operate">
        <div
          :class="
            active == 'track'
              ? 'grid-info-operate-div grid-info-operate-div-active'
              : 'grid-info-operate-div'
          "
          @click="handleClick('track')"
        >
          <img
            :src="
              active == 'track'
                ? require('../../assets/images/panels/guijihuifangdianjihou.png')
                : require('../../assets/images/panels/guijihuifangdianjiqian.png')
            "
            width="14px"
            height="16px"
            style="margin: 2px 10px 0 0"
          />轨迹回放
        </div>
        <div
          :class="
            active == 'history'
              ? 'grid-info-operate-div grid-info-operate-div-active'
              : 'grid-info-operate-div'
          "
          @click="handleClick('history')"
        >
          <img
            :src="
              active == 'history'
                ? require('../../assets/images/panels/chakanlishidianjihou.png')
                : require('../../assets/images/panels/chakanlishidianjiqian.png')
            "
            width="14px"
            height="16px"
            style="margin: 2px 10px 0 0"
          />查看历史
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import exportVue from "@/assets/modules/exportVue";
@Component({
  name: "GridInfo",
  components: { BasePaenl }
})
export default class extends Vue {
  data: any = {};
  active = "";
  userImgUrl = "";
  mounted() {
    const win: any = window;
    this.userImgUrl = win.user.DOWNLOAD_BASE_PATH;
    const _this = this;
    exportVue.$on("initGrid", (item: any) => {
      console.log("iiii", item);
      _this.data = item;
    });
  }
  handleClick(type: string) {
    this.active = type;
    if (type == "track") {
      exportVue.$emit("track-active", true);
    } else {
      this.$store.commit("panel/setDialogShow", true);
      this.$store.commit("panel/setDialog", "Chistory");
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 228px;
  .grid-info-contain {
    height: 171px;
    display: flex;
    .grid-info-photo-bg {
      width: 119px;
      height: 163px;
      background: url("../../assets/images/panels/fangguanyuanzhaopiandikuang.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .grid-info-content {
      margin-left: 10px;
      display: flex;
      height: 28px;
      .grid-info-item {
        font-family: AlibabaPuHuiTi_2_55_Regular;
        font-size: 16px;
        line-height: 22px;
        color: #ffffff;
        margin-right: 20px;
      }
    }
  }
  .grid-info-operate {
    margin-top: 10px;
    display: flex;
  }
  .grid-info-operate-div {
    width: 190px;
    height: 32px;
    background: url("../../assets/images/panels/guijihuifanganniubeijingqian.png");
    background-size: 100% 100%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: AlibabaPuHuiTi_2_75_SemiBold;
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
  }
  .grid-info-operate-div-active {
    background: url("../../assets/images/panels/guijihuifanganniubeijinghou.png");
    background-size: 100% 100%;
    color: #08ebff;
  }
}
</style>
